<template>
  <div class="column-container">
    <h1 class="Flex JC">男女分布图</h1>
    <div
      ref="monthWorkOrder"
      class="echarts-box"
      style="width: 600px; height: 300px; border: 1px solid red"
    ></div>
  </div>
  
</template>

<script>
export default {
  name: "index",
  data() {
    return {};
  },
  mounted() {
    this.initMonthWorkOrder();
  },
  methods: {
    initMonthWorkOrder() {
      let myChart = this.$echarts.init(this.$refs.monthWorkOrder);
      let options = {
        tooltip: {
          backgroundColor: "rgba(204, 221, 255, 0.6)",
          trigger: "axis",
          borderColor: "#CCDDFF",
          textStyle: { color: "#2562DC" },
        },
        color: ["#635df7", "#f15d5d"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#D3D8DD",
              },
            },
          },
        ],
        series: [
          {
            name: "维修",
            type: "bar",
            barWidth: 10,
            data: [141, 39, 10, 16, 79, 116, 67, 104, 12, 36, 20, 128],
          },
          {
            name: "保养",
            type: "bar",
            barWidth: 10,
            data: [36, 124, 112, 87, 16, 28, 80, 24, 112, 146, 127, 105],
          },
        ],
      };
      myChart.setOption(options);
    },
  },
};
</script>

<style lang="scss" scoped>
.column-container {
  height: 100%;
}
</style>